// out: ../css/integral1.css
@import url(base.less);
@import url(var.less);

body {
    background-color: @bg_color;
}

// 顶部
.nav {
    width: 100%;
    height: (44/@rem);
    display: flex;
    padding-left: (20/@rem);
    // line-height: (44/@rem);
    align-items: center;
    background-color: @text_white;
    position: sticky;
    top: 0;

    a {
        color: @text_black;
        font-size: (16/@rem);

        span {
            font-weight: 900;
        }
    }

    h2 {
        font-size: (16/@rem);
        color: @text_black;
        // font-weight: 700;
        margin-left: (128/@rem);
    }
}

// 可用积分
.user_integral {
    width: (356/@rem);
    height: (103/@rem);
    background-color: @text_white;
    margin: (10/@rem) auto;
    padding: 0 (31/@rem) 0 (36/@rem);
    display: flex;
    justify-content: space-between;
    align-items: center;

    .left {
        text-align-last: left;

        .top {
            .top_left {
                font-size: (16/@rem);
                line-height: (20/@rem);
                color: @text_black;
                margin-bottom: (9/@rem);
            }

            .top_right {
                font-size: (20/@rem);
                line-height: (28/@rem);
                font-weight: 700;
                margin-left: (18/@rem);
            }
        }

        .bottom {
            a {
                font-size: (12/@rem);
                line-height: (17/@rem);
                color: @text_gray ;

                .icon-a-fh3x {
                    font-size: (12/@rem);
                    color: @text_gray ;
                    padding-left: (7/@rem);
                }
            }

        }
    }

    .right {
        img {
            width: (38/@rem);
            height: (36/@rem);
        }

    }
}

// 积分记录
.record {
    width: (356/@rem);
    height: (406/@rem);
    background-color: @text_white;
    margin: 0 auto;
    padding: (22/@rem) 0 (33/@rem) (25/@rem);

    .demo1 {
        margin-top: (24/@rem);

        ul {
            width: (306/@rem);
            color: @text_black;
            border-bottom: (1/@rem) solid @border_color;
            padding-bottom: (24/@rem);

            li {
                &:nth-child(1) {
                    font-size: (14/@rem);
                    line-height: (20/@rem);
                    margin-bottom: (6/@rem);
                }

                &:nth-child(2) {
                    font-size: (12/@rem);
                    line-height: (17/@rem);
                    color: @text_gray;

                    .num {
                        color: @text_black;
                    }
                }
            }
        }
    }


    .demo {
        display: flex;

        a {
            font-size: (16/@rem);
            line-height: (22/@rem);
            font-weight: 700;
            margin-right: (24/@rem);


            &:nth-child(2) {
                color: @text_yellow;

                .circle {
                    width: (37/@rem);
                    height: (5/@rem);
                    background-color: @text_yellow;
                    border-radius: (2.5/@rem);
                    margin-top: (9/@rem);
                    margin-left: (14/@rem);
                }
            }
        }
    }


}

// 底部
.bot {
    text-align: center;
}